import React, { PureComponent } from 'react'
import { connect } from'react-redux'
import { addNumberAction,subNumberAction } from '../store/count/action'
import { fetchDataAction  } from '../store/home/action'
export class About extends PureComponent {
  componentDidMount(){
    this.props.fetchData()
  }

  render() {
    const { count,addNumber,subNumber,banners,recommend } = this.props
    return (
      <div>
        <h1>About Page: {count}</h1>
        <button onClick={()=>addNumber(22)}>+22</button>
        <button onClick={()=>subNumber(22)}>-22</button>
        <ul>
            banners:
            {banners.map((item,index)=><li key={index}>{item}</li>)}
        </ul>
        <ul>
            recommend:
            {recommend.map((item,index)=><li key={index}>{item}</li>)}
        </ul>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    count: state.count.count,
    banners: state.home.banners,
    recommend: state.home.recommend
  }
}
const mapDispatchToProps = (dispatch) => ({
    addNumber(num){dispatch(addNumberAction(num))},
    subNumber(num){dispatch(subNumberAction(num))},
    fetchData(){dispatch(fetchDataAction())},
    // changeBanner(banners){dispatch(changeBannerAction(banners))},
    // changeRecommend(recommend){dispatch(changeRecommendAction(recommend))},
})
export default connect(mapStateToProps,mapDispatchToProps)(About)
